<template>
  <div class="light-background">
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#E6E6FA;stop-opacity:0.7" />
          <stop offset="100%" style="stop-color:#F8F8FF;stop-opacity:0.3" />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill="#F8F8FF"/>
      <path d="M0 100 Q 250 50 500 100 T 1000 100" fill="none" stroke="url(#grad1)" stroke-width="2"/>
      <path d="M0 150 Q 250 100 500 150 T 1000 150" fill="none" stroke="url(#grad1)" stroke-width="2"/>
      <circle cx="5%" cy="10%" r="30" fill="#E6E6FA" opacity="0.5"/>
      <circle cx="95%" cy="90%" r="50" fill="#E6E6FA" opacity="0.3"/>
      <circle cx="80%" cy="20%" r="20" fill="#E6E6FA" opacity="0.4"/>
      <circle cx="20%" cy="80%" r="40" fill="#E6E6FA" opacity="0.2"/>
      <path d="M100,100 C150,200 350,0 500,100 S850,200 1000,100" fill="none" stroke="#E6E6FA" stroke-width="1.5" opacity="0.5"/>
      <path d="M0,150 C150,50 350,250 500,150 S850,50 1000,150" fill="none" stroke="#E6E6FA" stroke-width="1.5" opacity="0.5"/>
    </svg>
  </div>
</template>

<script setup>
// No additional script needed
</script>

<style scoped>
.light-background {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}
</style>